<template>
  <div>
    <Oprate></Oprate>
    <div class="main-container">
      <div>
        <table id="example" class="display" style="width:100%">
          <thead>
          <tr>
            <th align="center"><input type="checkbox" class="checkall"/></th>
            <th>医院</th>
            <th>医院等级</th>
            <th>医院地址</th>
            <th>医疗保险</th>
            <th>床位数</th>
            <th>科室数</th>
            <th>年门诊量</th>
          </tr>
          </thead>
          <tfoot>
          <tr>
            <th style="visibility:hidden"></th>
            <th class="tfoot">医院</th>
            <th class="tfoot">医院等级</th>
            <th class="tfoot">医院地址</th>
            <th class="tfoot">医疗保险</th>
            <th class="tfoot">床位数</th>
            <th class="tfoot">科室数</th>
            <th class="tfoot">年门诊量</th>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import Oprate from '../../../Oprate/Oprate2'
  export default {
    components: {
      Oprate
    },
    mounted() {
/*        this.$axios.get('http://tlpt.yutaolife007.com/huimeidata/getHcos').then(response => {
          console.log(response.data);
        }, response => {
          console.log("error");
        });*/
      this.table2();
    },
    methods: {
      table2() {
        $(document).ready(function() {
          // 设置-添加一个文本输入到每个页脚单元格
          $('#example tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="搜索" />' );
          } );
          /*全选*/
          $(".checkall").click(function () {
            var check = $(this).prop("checked");
            $(".checkchild").prop("checked", check);
          });
          //不显示任何错误信息
          $.fn.dataTable.ext.errMode = 'none';
          // 资料表
          var table = $('#example').DataTable({
            language: {
              "sSearch": "搜索:",
              "oPaginate": {
                "sPrevious": "上一页",
                "sNext": "下一页",
              }
            },
            /*表数据*/
            "ajax": "http://tlpt.yutaolife007.com/huimeidata/getHcos",
            "columns": [
              {
                "sClass": "text-center",
                "data": "ID",
                "render": function (data, type, full, meta) {
                  return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                },
                "bSortable": false
              },
              {
                "data": "hosName",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                  $(nTd).html('<a href="#/account/hospitalXx">' + oData.hosName + "</a>");
                },
              },
              {"data": "hosGrade"},
              {"data": "hosSite"},
              {"data": "healthInsurance"},
              {"data": "bedNum"},
              {"data": "deptNum"},
              {"data": "outpatientNum"},
            ],
            /* 表宽度*/
            columnDefs: [
              {
                width: "1px",
                orderable: false,
                className: 'select-checkbox',
                targets: 0
              },
              {"width": "150px", "targets": 1},
              {"width": "20px", "targets": 2},
              {"width": "50px", "targets": 3},
              {"width": "20px", "targets": 4},
              {"width": "20px", "targets": 5},
              {"width": "20px", "targets": 6},
              {"width": "20px", "targets": 7},
            ],
            dom: "Bfrtip",
            scrollY: true,
            buttons: ['colvis'],
            select: {
              style: 'os',
              selector: 'td:first-child'
            },
            order: [[1, 'asc']]
          });
          // 应用搜索
          table.columns().every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                that
                  .search( this.value )
                  .draw();
              }
            } );
          } );
          $('.dt-buttons>button>span').html("");
        } );
      },
    },
  }
</script>

<style scoped>
.main-container {
  margin-right: 50px;
  padding: 10px 15px 80px;
  background-color: rgba(245, 245, 248, 0.1);
  border-radius: 10px;
  -webkit-box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
  background-image: url("../../../../assets/blur-bg-blurred.jpg");
  font-size: 14px;
}
</style>
<style>
  .dt-button-collection>button:first-child{
    display: none!important;
  }
  a{
    color: #fff!important;
    text-decoration: none!important;
  }
  .table {
    width: 100%;
  }
  .scope {
    border-bottom: 1px solid #ddd;
  }
  .scope > td {
    padding: 0 8px;
    line-height: 35px;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .scope > td > a {
    color: #fff;
    text-decoration: none;
  }
  thead {
    color: #fff;
  }
  tbody {
    background-color: rgba(0, 0, 0, .15);
    color: #fff;
  }
  tbody > tr {
    background-color: rgba(0, 0, 0, .15) !important;

  }
  tbody > tr > td {
    background-color: rgba(0, 0, 0, .15) !important;
  }
  td{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .tfoot{
    border-top: none !important;
  }
  .tfoot > input {
    width: 100%;
    padding: 3px;
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  #example_filter > label > input {
    padding: 3px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  .dataTables_scrollBody{
    top: 45px!important;
    z-index: 99;
  }
  .dataTables_scrollFoot{
    position: absolute;
    top: 81px;
    z-index: 99;
  }
  #example_info{
    display: none;
    z-index: 99;
  }
  #example_paginate{
    position: relative;
    top: 55px;
    z-index: 99;
  }
  #example_info, #example_filter {
    color: #fff;
  }
  input::-webkit-input-placeholder {
    color: #fff;
  }
  #example_paginate {
    color: #ffffff !important;
  }
  #example_paginate > a {
    color: #fff !important;
  }
  .select-checkbox:before {
    border: 1px solid #fff !important;;
  }
  table {
    margin: 0 auto;
    width: 100%;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
  }
  th,td {
    white-space: nowrap;
  }
  .text-center{
    text-align: center;
  }
</style>
